<template>
	<view id="SignUp">
		<view class="bg"></view>
		<div class="container">
			<div class="cotent-container">
				<div class="header">
					<span class="h-title">- 加入团队 -</span>
				</div>
				<div class="card-container  shadow shadow-lg ">
					<div class="card-info">
						<div class="information">
							<div class="meeting-name">加入团队：{{team.Name}}</div>
							<div class="meeting-code">队长：{{team.LeaderName}}</div>
							<view class="cu-bar bg-white margin-top-xl">
								<view class="action text-left">
									<text class="cuIcon-title text-green"></text>
									<text>请确认您的个人信息</text>
								</view>
							</view>
							<form class="margin-bottom">
								<view class="cu-form-group">
									<view class="title">姓名</view>
									<input placeholder="请输入姓名" v-model="userInfo.realName" disabled></input>
								</view>
								<view class="cu-form-group">
									<view class="title">学号</view>
									<input placeholder="请输入学/工号" v-model="userInfo.userCode" disabled></input>
								</view>
								<view class="cu-form-group">
									<view class="title">所属学院</view>
									<input placeholder="请输入所属部门" v-model="userInfo.belongDepart"></input>
								</view>
								<view class="cu-form-group">
									<view class="title">电话</view>
									<input placeholder="请填写电话" v-model="userInfo.mobile"></input>
								</view>
								<view class="cu-form-group">
									<view class="title">邮箱</view>
									<input placeholder="请填写邮箱" v-model="userInfo.email"></input>
								</view>
							</form>
						</div>
						<div class="card-quarter-lb card-quarter"></div>
						<div class="card-quarter-rb card-quarter"></div>
					</div>
					<div class="card-actions">
						<div class="card-quarter-lt card-quarter"></div>
						<div class="card-quarter-rt card-quarter"></div>
						<button class="cu-btn bg-blue block lg margin-lr" @click="joinTeam()">加入团队</button>
						<button class="cu-btn bg-gray block lg margin-top-sm margin-lr" @click="toHome">返回主页</button>
					</div>
				</div>
				<div class="header">
					<span class="h-title"></span>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	let app = require("@/config");
	export default {
		onLoad(opt) {
			this.getTeam(opt.id);
		},
		data() {
			app.userInfo.belongDepart = app.userInfo.belongDepart || '信息学院'
			return {
				team: {},
				userInfo: app.userInfo
			}
		},
		methods: {
			toHome() {
				uni.reLaunch({
					url:'/iuc/index/index'
				})
			},
			getTeam(ID) {
				uni.post("/api/team/GetTeam", {ID}, msg => {
					if(msg.success) {
						this.team = msg.data;
					} else {
						location.href = "/uc/bindfail?msg=" + msg.msg;
					}
				})
			},
			joinTeam() {
				uni.post("/api/team/JoinTeam", {
					teamId: this.team.ID,
					depart: this.userInfo.belongDepart,
					mobile: this.userInfo.mobile,
					email: this.userInfo.email
				}, msg => {
					if(msg.success) {
						location.href = "/uc/bindsuccess?msg=成功加入团队";
					} else {
						uni.showToast({
							icon: 'none',
							title: msg.msg
						})
					}
				})
			}
		}
	}
</script>

<style>
	
	.bg {
	    background: url('../../static/SignUpBack.jpg') no-repeat 50% 50% / cover;
	    position: fixed;
	    left: 0px;
	    right: 0px;
	    top: 0px;
	    bottom: 0px;
	    filter: blur(20px);
	}

	.container {
		width: 100%;
		/* min-height: 570px; */
		max-height: 90vh;
		position: absolute;
		margin: auto;
		left: 0px;
		right: 0px;
		top: 0px;
		bottom: 0px;
	}

	.cotent-container {
		width: 100%;
		height: 100%;
		background: #f8f9fb;
		position: relative;
		border-radius: 5px;
		box-shadow: 0 0 20px 0 rgba(0, 0, 0, .2);
		margin: auto;
		/* margin-top: 25vh; */
	}

	/* 3. 会议卡片 */
	.cotent-container .header {
		padding: 16px 6px 0px 6px;

		/*元素居中*/
		justify-content: center;
		align-items: center;
		display: flex;
	}

	.cotent-container .header .h-title {
		font-size: 12px;
		color: #c8cacc;
		line-height: 20px;
	}

	.card-container {
		display: block;
		width: 100%;
		background: #fff;
		border: 0 solid #e0e2e5;
		box-shadow: 0 0 10px 0 rgba(0, 0, 0, .04);
		border-radius: 8px;
		max-width: 90%;
		margin-left: 37.5rpx;
		margin-right: 37.5rpx;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		font-family: PingFangSC-Regular, Microsoft YaHei;
		position: relative;
		padding-bottom: 10px;
	}

	.card-container .card-info {
		min-height: 140px;
	}

	.card-container .card-info .information {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.card-container .card-info::after {
		content: "";
		width: 94%;
		height: 2px;
		display: block;
		margin: -2px auto -4.4px;
		/* 一条虚线 */
		background-image: linear-gradient(90deg, #d4d6d9 60%, hsla(0, 0%, 100%, 0) 0);
		background-position: bottom;
		background-size: 9px 1px;
		background-repeat: repeat-x;
	}

	.card-container .card-quarter {
		width: 8px;
		height: 8px;
		background-color: #f8f9fb;
		border-top: 0 solid #f8f9fb;
		border-right: 0 solid #f8f9fb;
	}

	.card-container .card-quarter-lb {
		left: -1px;
		bottom: -1px;
		border-radius: 0 8px 0 0;
		margin-top: -8px;
		box-shadow: inset -4px 0 5px -3px rgba(0, 0, 0, .15)
	}

	.card-container .card-quarter-lt {
		left: -1px;
		top: -1px;
		border-radius: 0 0 8px 0;
		margin-top: 4px;
		box-shadow: inset 0px -4px 5px -3px rgba(0, 0, 0, .15)
	}

	.card-container .card-quarter-rb {
		right: -1px;
		bottom: -1px;
		border-radius: 8px 0 0 0;
		float: right;
		margin-top: -8px;
		box-shadow: inset 4px 0 5px -3px rgba(0, 0, 0, .15)
	}

	.card-container .card-quarter-rt {
		right: -1px;
		top: -1px;
		border-radius: 0 0 0 8px;
		float: right;
		margin-top: -8px;
		box-shadow: inset 4px 0px 5px -3px rgba(0, 0, 0, .15)
	}

	.card-container .card-actions {
		min-height: 50px;
	}

	.information .meeting-name {
		width: 310px;
		/* height: 60px; */
		padding: 24px 12px 0;
		font-size: 20px;
		line-height: 26px;
		color: #2d3033;
		letter-spacing: 0;
		text-align: center;
	}

	.information .meeting-code {
		width: 100%;
		height: 20px;
		margin-top: 8px;
		font-size: 17px;
		color: #2d3033;
		letter-spacing: 0;
		text-align: center;
	}
	
	.cu-bar {
		min-height: auto;
	}
</style>
